<template>
    <a-modal :open="open" title="" @ok="handleOk" @cancel="onClose" :footer="null"
             :closable="false"
             :width="400"
             :body-style="bodyStyleModal">
        <a-input v-model:value="checkPassword" class="inputUserCode" placeholder="请输入查询密码"></a-input>
        <div style="background-color: black;height: 1px;width: 280px;position: relative;top: 12px;margin: 5px 0 13px;"></div>
        <div class="buttonDiv">
            <a-button shape="round" class="confirmBtn" @click="handleOk">确定</a-button>
        </div>
<!--        <a-input-password v-model:value="checkPassword" class="inputUserCode" placeholder="请输入查询密码"></a-input-password>-->
<!--        <a-divider style="margin: 5px 0;background-color: black"></a-divider>-->
<!--        <div class="buttonDiv">-->
<!--            <a-button shape="round" class="confirmBtn" @click="handleOk">确定</a-button>-->
<!--        </div>-->
    </a-modal>
    <key-board ref="keyBoard" @handleOk="handleOk" @closeKeyBoard="onClose" :open="open" :get-key-board-input="getKey"></key-board>
    <update-username ref="updateUsername"></update-username>
    <update-password ref="updatePassword"></update-password>
    <users-file ref="userList"></users-file>
</template>

<script>

import axios from "axios";
import {message} from "ant-design-vue";
import MD5 from "MD5";
import UpdatePassword from "@/components/updatePassword.vue";
import API_BASE_URL from "../../config.js";
import UpdateUsername from "@/components/updateUsername.vue";
import store from "@/store";
import UsersFile from "@/components/usersFile.vue";
import KeyBoard from "@/components/keyBoard.vue";

export default {
    name: "checkPassword",
    components: {KeyBoard, UsersFile, UpdatePassword, UpdateUsername},
    props: ['getSettingSignal', 'getCheckPassSignal'],
    data() {
        return {
            open: false,
            //大小写
            capsLock: false,
            checkPassword: "",
            bodyStyleModal:{
                'height': '170px','display':'grid', 'justify-content':'center', 'align-items':'center','margin':'-20px -24px'
            },
            url: {
                login: `${API_BASE_URL}/login`
            },
            savePasswd: "",
            savePasswdSignal: false,//保存密码的信号

        }
    },
    methods: {
        //认证密码
        handleOk() {
            let passwd = MD5(this.checkPassword)
            axios({
                url: this.url.login,
                method: 'get',
                params: {passwd}
            }).then((res) => {
                if (res.data.message === 'success') {
                    message.success("密码正确")
                    this.open = false
                    this.getSettingSignal(!this.open)
                    //保存密码
                    store.commit('setPasswd',{value:this.checkPassword})
                    //开启五分钟定时器
                    let a = setTimeout(() => {
                        store.commit('setPasswd',{value:''})
                        console.log('保存密码时间到'+store.state.savePasswd)
                        this.checkPassword = ''
                    },500000)

                    console.log('this.savePasswd'+this.savePasswd)
                    console.log('this.checkPassword'+this.checkPassword)



                    if (store.state.updateUsername) {
                        this.$refs.updateUsername.UserNameModal = true
                        console.log('123444')
                    }
                    if (store.state.updatePassword) {
                        this.$refs.updatePassword.openUpdatePassword = true
                    }
                    if (store.state.userFile) {
                        this.$refs.userList.open = true
                        this.$refs.userList.getUserList()
                    }

                } else {
                    message.error("密码错误，请重新输入")
                }
            })
        },
        onClose() {
            // eslint-disable-next-line vue/no-mutating-props
            this.open = false
            this.$refs.keyBoard.onclose()
            this.$refs.updateUsername.UserNameModal = false
            this.checkPassword = ''
            console.log('this.checkPassword'+this.checkPassword)
            store.commit('setUpdateUsername', {value: false})
            store.commit('setUpdatePassword', {value: false})
            store.commit('setUserFile', {value: false})
        },
        getKey(val){
          this.checkPassword = val
        },
    },
    created() {
        this.checkPassword = store.state.savePasswd
    }
}
</script>

<style scoped>
.button {
    width: 59px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
}

.button1 {
    width: 59px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
    padding: 1px 15px;
}

.inputUserCode {
    border-style: hidden;
    width: 295px;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    text-align: center;
    top: 50px;
    margin-top: -50px;
}
.inputUserCode::placeholder {
    font-size: 20px;
}

.buttonDiv {
    display: flex;
    justify-content: center;
    gap: 60px;
    position: relative;
    bottom: 10px;
}
.confirmBtn {
    width: 115px;
    height: 42px;
    background: #4db0e7;
    color: white;
    font-size: 16px;
    letter-spacing: -2px;
}
</style>